<template>
  <div class="mainbox">
    <!-- 左边的图形展示 -->
    <div class="column left">
      <VueDragResize :w="360" :h="300" :x="30" :z="1" :y="100" :isDraggable=isDraggable :isResizable=isResizable>
        <Panel mychart="echart1" :option="chartsList[0]" title="空气"></Panel>
      </VueDragResize>
      <VueDragResize :w="360" :h="300" :x="30" :z="1" :y="400" :isDraggable=isDraggable :isResizable=isResizable>
        <Panel mychart="echart5" :option="chartsList[3]" title="风速"></Panel>
      </VueDragResize>
    </div>

    <!-- 中间的图形展示 -->
    <div class="column center">
      <!-- 首页数字展示 -->
      <div class="mainboxtop">
      </div>
      <!-- 首页地图展示 -->
      <div class="mainboxbody">
        <div ref="chinamap" class="chinamap"></div>
        <!-- 背景地球 -->
        <div class="map1"></div>
        <!-- 正旋转 -->
        <div class="map2"></div>
        <!-- 逆旋转 -->
        <div class="map3"></div>
      </div>
    </div>
    <!-- 右边的图形展示 -->
    <div class="column right">
      <VueDragResize :w="360" :h="300" :y="100" :x="0" :z="1" :isDraggable=isDraggable :isResizable=isResizable>
        <Panel mychart="echart2" :option="chartsList[2]" title="土壤PH"></Panel>
      </VueDragResize>
      <VueDragResize :w="360" :h="300" :z="1" :x="0" :y="400" :isDraggable=isDraggable :isResizable=isResizable>
        <Panel mychart="echart3" :option="chartsList[4]" title="土壤三合一"></Panel>
      </VueDragResize>
    </div>


  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
import "../config/china.js";
import * as echarts from "echarts";
import Panel from "./Panel.vue";

export default {
  components: {
    Panel,
    VueDragResize
  },
  name: "MainBox",
  computed: {
    soilPH() {
      return this.chartsList[2].series[0].data
    },
    windSpeed() {
      return this.chartsList[3].series[0].data
    },
    air() {
      return this.chartsList[0].series[0].data
    },
  },
  data() {
    return {
      isResizable: false,
      isDraggable: false,
      chartsList: [
        {
          color: ["#2f89cf"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true,
          },
          xAxis: [
            {
              // 设置x轴标签文字样式
              // x轴的文字颜色和大小
              axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
              //  x轴样式不显示
              axisLine: {
                show: false,
              },
              type: "category",
              data: [
                "温度",
                "湿度",
                "压力",
                "亮度",
                "CO₂",
              ],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              // y 轴文字标签样式
              axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
              // y轴线条样式
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                  // width: 1,
                  // type: "solid"
                },
              },
              // y 轴分隔线样式
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                },
              },
            },
          ],
          series: [
            {
              name: "直接访问",
              type: "bar",
              // 修改柱子宽度
              barWidth: "35%",
              data: [200, 300, 300, 900, 1500],
              itemStyle: {
                // 修改柱子圆角
                barBorderRadius: 5,
              },
            },
          ],
        },
        {
          grid: {
            top: "10%",
            left: "22%",
            bottom: "10%",
            // containLabel: true
          },
          // 不显示x轴的相关信息
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              // data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
              data: ["土壤PH"],
              // 不显示y轴的线
              axisLine: {
                show: false,
              },
              // 不显示刻度
              axisTick: {
                show: false,
              },
              // 把刻度标签里面的文字颜色设置为白色
              axisLabel: {
                color: "#fff",
              },
            },
            {
              // data: [702, 350, 610, 793, 664],
              data: [700],
              inverse: true,
              // 不显示y轴的线
              axisLine: {
                show: false,
              },
              // 不显示刻度
              axisTick: {
                show: false,
              },
              // 把刻度标签里面的文字颜色设置为白色
              axisLabel: {
                color: "#fff",
              },
            },
          ],
          series: [
            {
              name: "条",
              type: "bar",
              // data: [70, 34, 60, 78, 69],
              data: [20],
              yAxisIndex: 0,
              // 修改第一组柱子的圆角
              itemStyle: {
                barBorderRadius: 20,
                // 此时的color 可以修改柱子的颜色
                color: function (params) {
                  return [
                    "#1089E7",
                    "#F57474",
                    "#56D0E3",
                    "#F8B448",
                    "#8B78F6",
                  ][params.dataIndex];
                },
              },
              // 柱子之间的距离
              barCategoryGap: 50,
              //柱子的宽度
              barWidth: 10,
              // 显示柱子内的文字
              label: {
                show: true,
                position: "inside",
                // {c} 会自动的解析为 数据  data里面的数据
                formatter: "{c}%",
              },
            },
            {
              name: "框",
              type: "bar",
              barCategoryGap: 50,
              barWidth: 15,
              yAxisIndex: 1,
              data: [100, 100, 100, 100, 100],
              itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          ],
        },
        {
          // 通过这个color修改两条线的颜色
          // color: ["#00f2f1", "#ed3f35"],
          color: ["#ed3f35"],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
              color: "#4c9bfd",
            },
            // 这个10% 必须加引号
            right: "10%",
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012f4a", // 边框颜色
            containLabel: true, // 包含刻度文字在内
          },
          //  土壤ph配置
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "20分钟前",
              "15分钟前",
              "10分钟前",
              "5分钟前",
              "现在",
            ],
            axisTick: {
              show: false, // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd", // 文本颜色
            },
            axisLine: {
              show: false, // 去除轴线
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false, // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd", // 文本颜色
            },
            axisLine: {
              show: false, // 去除轴线
            },
            splitLine: {
              lineStyle: {
                color: "#012f4a", // 分割线颜色
              },
            },
          },
          series: [
            {
              // name: "土壤ph",
              type: "line",
              smooth: true,
              // 土壤ph的值
              data: [1, 2, 3, 4, 6]
            },
          ],
        },
        {
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   top: "0%",
          //   data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
          //   textStyle: {
          //     color: "rgba(255,255,255,.5)",
          //     fontSize: "12",
          //   },
          // },

          grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              // x轴更换数据
              data: [
                "45分钟前",
                "40分钟前",
                "35分钟前",
                "30分钟前",
                "25分钟前",
                "20分钟前",
                "15分钟前",
                "10分钟前",
                "5分钟前",
                "现在",
              ],
              // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: 12,
                },
              },
              // x轴线的颜色为   rgba(255,255,255,.2)
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.2)",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisTick: { show: false },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: 12,
                },
              },
              // 修改分割线的颜色
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                },
              },
            },
          ],
          series: [
            {
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  color: "#00d887",
                  width: 2,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 216, 135, 0.4)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 216, 135, 0.1)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                },
              },
              // 设置拐点 小圆点
              symbol: "circle",
              // 拐点大小
              symbolSize: 5,
              // 设置拐点颜色以及边框
              itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
              // 开始不显示拐点， 鼠标经过显示
              showSymbol: false,
              // 风速的值
              data: [80, 70, 30, 40, 30, 120, 20, 99, 50, 20,],
            },
          ],
        },
        {
          color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
          ],
          tooltip: {
            trigger: "item",
            // formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            bottom: "0%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12",
            },
          },
          // 土壤三合一
          series: [
            {
              name: "土壤三合一",
              type: "pie",
              radius: ["10%", "70%"],
              center: ["50%", "50%"],
              roseType: "radius",
              // 图形的文字标签
              label: {
                fontSize: 10,
              },
              // 链接图形和文字的线条
              labelLine: {
                // length 链接图形的线条
                length: 6,
                // length2 链接文字的线条
                length2: 8,
              },
              data: [
                { value: 20, name: "土壤湿度" },
                { value: 26, name: "土壤温度" },
                { value: 24, name: "土壤电导率" },
              ],
            },
          ],
        },
        {
          color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },

          legend: {
            bottom: "0%",
            // 修改小图标的大小
            itemWidth: 10,
            itemHeight: 10,
            // 修改图例组件的文字为 12px
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12",
            },
          },
          series: [
            {
              name: "年龄分布",
              type: "pie",
              // 这个radius可以修改饼形图的大小
              // radius 第一个值是内圆的半径 第二个值是外圆的半径
              radius: ["40%", "60%"],
              center: ["50%", "45%"],
              avoidLabelOverlap: false,
              // 图形上的文字
              label: {
                show: false,
                position: "center",
              },
              // 链接文字和图形的线是否显示
              labelLine: {
                show: false,
              },
              data: [
                { value: 1, name: "0岁以下" },
                { value: 4, name: "20-29岁" },
                { value: 2, name: "30-39岁" },
                { value: 2, name: "40-49岁" },
                { value: 1, name: "50岁以上" },
              ],
            },
          ],
        },
      ],
      mycharts: null,
      chartFun: null,
    };
  },
  mounted() {

    $bus.$on("aMsg", (msg) => {
      this.isDraggable = msg;
      this.isResizable = msg;
    });

    var a = 1;
    // 定时器
    let updateSoilPH = setInterval(() => {
      this.soilPH.shift()
      this.soilPH.push(a)
      a++
      let temp = {
        // 通过这个color修改两条线的颜色
        // color: ["#00f2f1", "#ed3f35"],
        color: ["#ed3f35"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd",
          },
          // 这个10% 必须加引号
          right: "10%",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },
        //  土壤ph配置
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "20分钟前",
            "15分钟前",
            "10分钟前",
            "5分钟前",
            "现在",
          ],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a", // 分割线颜色
            },
          },
        },
        series: [
          {
            name: "土壤ph",
            type: "line",
            smooth: true,
            // data: yearData[0].data[1],
            // 土壤ph的值
            data: this.soilPH
          },
        ],
      }
      this.$set(this.chartsList, 2, temp);
    }, 5000)
    var b = 20;
    let updateWindSpeed = setInterval(() => {
      this.windSpeed.shift()
      this.windSpeed.push(b)
      b += 10
      let temp1 = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: [
              "45分钟前",
              "40分钟前",
              "35分钟前",
              "30分钟前",
              "25分钟前",
              "20分钟前",
              "15分钟前",
              "10分钟前",
              "5分钟前",
              "现在",],
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 风速的值
            data: this.windSpeed,
          },
        ],
      }
      this.$set(this.chartsList, 3, temp1);
      // console.log("我爱赵子豪", this.windSpeed);
    }, 2000)
    let updateAir = setInterval(() => {
      this.air[0] += 100
      this.air[1] += 80
      this.air[2] += 10
      this.air[3] += 50
      this.air[4] += 200
      let temp2 = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            // 设置x轴标签文字样式
            // x轴的文字颜色和大小
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
            //  x轴样式不显示
            axisLine: {
              show: false,
            },
            type: "category",
            data: [
              "温度",
              "湿度",
              "压力",
              "亮度",
              "CO₂",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // y 轴文字标签样式
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                // width: 1,
                // type: "solid"
              },
            },
            // y 轴分隔线样式
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: this.air,
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      }
      this.$set(this.chartsList, 0, temp2);
    }, 5000)
    let updateturang = setInterval(() => {
      let temp3 = {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: "0%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        // 土壤三合一
        series: [
          {
            name: "土壤三合一",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 10,
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8,
            },
            data: [
              { value: 20, name: "土壤湿度" },
              { value: 26, name: "土壤温度" },
              { value: 24, name: "土壤电导率" },
            ],
          },
        ],
      }
      this.$set(this.chartsList, 4, temp3);
    }, 3000)
  },
  beforeDestroy() {
    // 移除窗口改变监听
    window.removeEventListener("resize", this.chartFun);
  },

};
</script>

<style scoped>
/* 取消默认外边框虚线 */
.vdr.active:before {
  display: none;
}

/* 中间地图定位 */
.center {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

.mainbox {
  display: flex;
  /* padding: 0.125rem 0.125rem 0; */
}

.column {
  position: relative;
  height: 10rem; 
  /* background-color: pink; */
  flex: 3;
}
.mainbox .column:nth-child(1){
  /* position: absolute;
  left: 130px; */
  /* padding-left: 130px; */
}
.mainbox .column:nth-child(3){
  /* position: absolute;
  right: 130px; */
}
.mainbox .column:nth-child(2) {
  padding: 0 0.125rem 0.1875rem;
  flex: 5;
}

/* 以下是存放中国地图的容器样式 */
.mainboxtop {
  background-color: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}

.tophd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

@font-face {
  font-family: electronicFont;
  src: url(../../public/font/DS-DIGIT.TTF);
}

.tophd>ul,
.topbd>ul {
  display: flex;
}

.tophd>ul>li {
  flex: 1;
  display: inline-block;
  height: 1rem;
  color: #ffeb7b;
  font-size: 0.875rem;
  font-family: electronicFont;
}

.tophd>ul::after {
  position: absolute;
  right: 50%;
  width: 0.0125rem;
  height: 50%;
  top: 25%;
  background-color: rgba(255, 255, 255, 0.2);
  content: "";
}

.tophd::before,
.tophd::after {
  position: absolute;
  content: "";
  width: 0.375rem;
  height: 0.125rem;
}

.tophd::before {
  top: 0;
  left: 0;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}

.tophd::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}

.topbd>ul>li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.225rem;
  padding-top: 0.125rem;
}

.mainboxbody {
  position: relative;
  width: 100%;
  height: 10.125rem;
  /* background-color: pink; */
}

.chinamap {
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 5; */
  height: 10.125rem;
  width: 100%;
}

.map1,
.map2,
.map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  width: 6.475rem;
  height: 6.475rem;
  opacity: 0.3;
}

.map1 {
  background-image: url(../../public/images/map.png);

  animation: rotate 15s linear infinite;
}

.map2 {
  width: 8.0375rem;
  height: 8.0375rem;
  background-image: url(../../public/images/lbx.png);

  opacity: 0.8;
  animation: rotate 5s linear infinite;
  /* z-index: 2; */
}

.map3 {
  width: 7.075rem;
  height: 7.075rem;
  background-image: url(../../public/images/jt.png);

  animation: rotate1 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>